<template>
    <div class="loginIndex">
        <section>
            <div class="loginWorp">
                <div>
                    <login></login>
                </div>
                <div>
                    <loginAsideImage></loginAsideImage>
                </div>
            </div>
           
        </section>
        
    </div>
</template>
<script setup lang="ts">
import login from './login.vue'
import loginAsideImage from "./loginImage.vue"
</script>
<style lang='less'>
.loginIndex {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    background-color: #2d3a4b;
    section{
        padding: 20px;
        display: flex;
        justify-content:center;
        align-items: center;
        .loginWorp{
            width: 800px;
            height: 430px;
            overflow: hidden;
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            box-shadow: 0 12px 24px 0 rgb(255 255 255 / 10%);
            div{
                flex: 1;
            }
            &>div:nth-of-type(1){
                /*background-color: red;*/
            }
            &>div:nth-of-type(2){
                

            }
        }
    }
}
</style>